<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8"/>
    <title>自定义指令</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body ng-controller="someController">
    <button ng-click="clickUnfocused">
        Not focused
    </button>
    <button ngbk-foucs ng-click="clickFocused">
        I'm very focused!
    </button>
    <div>{{message.text}}</div>

    <script type="text/javascript">

        var appModule = angular.module('app', []);

        appModule.directive('ngbkFoucs', function () {
            return {
                link: function (scope, element, attrs, controller) {
                    element[0].focus()
                }
            }
        });

        function someController($scope) {
            $scope.message = {text: 'nothing clicked yet'};

            $scope.clickUnfocused = function () {
                alert('a');
                $scope.message.text = 'unfocused button clicked';
            }

            $scope.clickFocused = function () {
                alert('b');
                $scope.message.text = 'focus button clicked';
            }

            var appModule = angular.module('app', ['direcitives'])
        }
    </script>
</body>
</html>